<%--
  Created by IntelliJ IDEA.
  User: huangzhongyao
  Date: 2019/1/20
  Time: 11:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%@include file="/WEB-INF/common/hplus-css.jsp"%>
    <title>Title</title>
</head>
<body>
<div style="background-color: grey;width: 100%;height: 100%">
<div style="background-color: white;width: 100%;height: 100%">

<br><br>
<label class="col-sm-2"></label>区域名称: <input type="text" class="col-sm-2"  list="t" id="area"   placeholder="输入城市/区域名称" onchange="getAreaCode('area_line',this.value)">
    <datalist id="t">
        <option value="黔西县">黔西县</option>
        <option value="凯里">凯里</option>
        <option value="镇远县">镇远</option>
        <option value="黔西县">黔西县</option>
        <option value="开阳县">开阳县</option>
        <option value="修文县">修文县</option>

    </datalist>
    <p></p>
    <label class="col-sm-2"></label>邮政编码：  <input type="text" readonly class="col-sm-2" size="50" id="area_line" />

</div>
</div>

<%@include file="/WEB-INF/common/hplus-js.jsp"%>
<script>


    function getAreaCode(inputid,areaname) {
        getZipCode(inputid,areaname);
    }

    function subname() {
        var str = $("#input").val();
        var han = /^[\u4e00-\u9fa5]+$/;
        if (str == '') {
            return false;
        };
        if (!han.test(str)) {
            return false;
        };
        return true;
    };

/*

    function getZipCode(inputId,value){
        if(subname(value)){
            return;
        }

        $("#"+inputId).searchSuggest({
            //'http://unionsug.baidu.com/su?p=3&t='+ (new Date()).getTime() +'&wd='
            url:'http://ali-city.showapi.com/areaName?level=3&maxSize=30&page=1&areaName='+value, /!*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*!/
            headers:{Authorization:'APPCODE cffe7eb1b7e64714902c0727da7102f6'},
            jsonp: 'cb',/!*如果从 url 获取数据，并且需要跨域，则该参数必须设置*!/
            json:{
                'data':[
                    {'id':'0','word':'','zipCode':''},
                ],
                'defaults':'http://lzw.me'
            },
            width:300,   /!*提示框的宽度，缺省为输入框的宽度相同*!/
            topoffset: 16,  /!*提示框与输入框的距离，缺省为5*!/
            style: 'line',
            cssFile: "/assets/css/search-suggest.css",
            processData: function(json){// url 获取数据时，对数据的处理，作为 getData 的回调函数
                if(!json || json.showapi_res_body.data.length== 0) return false;
                var jsonStr = "{'data':[";
                for (var i = json.showapi_res_body.data.length - 1; i >= 0; i--) {
                    jsonStr += "{'id':'" + i
                        + "','word':'"+ json.showapi_res_body.data[i].areaName
                        + "', 'zipCode': '"+json.showapi_res_body.data[i].zipCode+"'},";
                    console.log("区域名称"+json.showapi_res_body.data[i].areaName)
                    console.log("区域邮政编码"+json.showapi_res_body.data[i].zipCode)
                }
                jsonStr += "],'defaults':'baidu'}";

                //字符串转化为 js 对象
                return json = (new Function("return "+jsonStr ))();
            },
            getData: function(word, parent, callback) {//数据获取方法

                if(!word) return;
                $.ajax({
                    type: 'GET',
                    /!*data: "word=" + word,*!/
                    //url: 'http://unionsug.baidu.com/su?p=3&t='+ (new Date()).getTime() +'&wd=' + encodeURIComponent(word) + '&cb=?',
                    url:"http://ali-city.showapi.com/areaName?level=3&maxSize=1000&page=1&areaName="+value,
                    headers:{
                        Authorization:'APPCODE cffe7eb1b7e64714902c0727da7102f6'},
                    //'http://suggest.taobao.com/sug?code=utf-8&extras=1&q='+word+'&callback=?'
                    dataType: 'json',
                    timeout: 3000,
                    success: function(data) {
                        console.log(data);
                        callback(parent, data);
                    },
                    error: function(data){callback(parent, data);}
                });
            }

        });
    }

*/


   /* $("#area_line").searchSuggest({
        //'http://unionsug.baidu.com/su?p=3&t='+ (new Date()).getTime() +'&wd='
        url:"http://ali-city.showapi.com/areaName?level=3&maxSize=30&page=1&areaName=天" , /!*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*!/
    jsonp: 'cb',/!*如果从 url 获取数据，并且需要跨域，则该参数必须设置*!/
        json:{
        'data':[
            {'id':'0','word':'baidu','description':''},
            {'id':'1','word':'lzw.me','description':''},
            {'id':'2','word':'w1.lzw.me','description':''},
            {'id':'3','word':'g.lzw.me','description':''},
            {'id':'4','word':'seo.lzw.me','description':''}
        ],
            'defaults':'http://lzw.me'
    },
    width:300,   /!*提示框的宽度，缺省为输入框的宽度相同*!/
        topoffset: 16,  /!*提示框与输入框的距离，缺省为5*!/
        style: 'line',
        cssFile: 'css/search-suggest.css',
        processData: function(json){// url 获取数据时，对数据的处理，作为 getData 的回调函数
        if(!json || json.s.length == 0) return false;

        console.log(json);

        var jsonStr = "{'data':[";
        for (var i = json.s.length - 1; i >= 0; i--) {
            jsonStr += "{'id':'" + i
                + "','word':'"+ json.s[i]
                + "', 'description': ''},";
        }
        jsonStr += "],'defaults':'baidu'}";

        //字符串转化为 js 对象
        return json = (new Function("return "+jsonStr ))();
    },
    getData: function(word, parent, callback) {//数据获取方法
        if(!word) return;
        $.ajax({
            type: 'GET',
            /!*data: "word=" + word,*!/
            url: 'http://unionsug.baidu.com/su?p=3&t='+ (new Date()).getTime() +'&wd=' + encodeURIComponent(word) + '&cb=?',
            //'http://suggest.taobao.com/sug?code=utf-8&extras=1&q='+word+'&callback=?'
            dataType: 'json',
            timeout: 3000,
            success: function(data) {
                callback(parent, data);
            },
            error: function(data){callback(parent, data);}
        });
    }

    });*/



    /**
     *
     *传入城市/区域名称查询邮政编码
     * */
    function getZipCode(inputId,areaName) {
        $.ajax({
            url:"http://ali-city.showapi.com/areaName?level=3&maxSize=20&page=1&areaName="+areaName,
            type:"GET",
            headers:{
                Authorization:'APPCODE cffe7eb1b7e64714902c0727da7102f6'},//阿里云身份验证
            dataType:"json",
            success:function(json){
                if(areaName==''|| areaName == null || areaName.length == 0){
                    return;
                }else {
                    if(json.showapi_res_body.data.length!= 0){
                        /**
                         *   返回值参数说明
                         *"provinceId": "",//省份id
                         "simpleName": "上海",//简称
                         "lon": "121.472644",
                         "areaCode": "",//区域码
                         "cityId": "0", //市id
                         "remark": "", //备注
                         "id": "310000000000",//id
                         "pinYin": "Shanghai", //拼音
                             "parentId": "0",//父id
                         "level": 1,//级别 1省 2市 3县 4乡镇
                         "areaName": "上海",//区域名称;
                         "simplePy": "SH",//缩写
                         "zipCode": "",//邮政编码
                         "countyId": "0",//县 id
                         "lat": "31.231706",//经纬度
                         "wholeName": "中国,上海" // 完整名称
                         */
                        $("#"+inputId).val(json.showapi_res_body.data[0].zipCode);
                        layer.msg("已查询到该区域邮政编码!")
                    }else {
                        layer.msg("没有查询到该区域邮政编码!",{icon:5});

                    }
                }

            },
            error:function(jqXHR){
                console.log("Error: "+jqXHR.status);
            }
        });
    }

</script>
</body>
</html>
